<template>
  <div id="app">
    <!-- TopBar -->
    <!-- key属性，只要key属性的值发生变化，组件就会发生重载 -->
    <TopBar :key="num"/>
    <!-- Header -->
    <Header />
    <!-- 页面主体部分 -->
    <router-view @fn="changeNum"/>
    <!-- Footer -->
    <Footer />
    <!-- Login组件 -->
    <Login v-show="isShowLoginModal"/>
    <!-- Toast组件 -->
    <transition name="fade">
      <Toast v-show="isShowToast"/>
    </transition>
    
  </div>
</template>

<script>
import {JingpinAPI} from "@/request/api"
import TopBar from '@/components/TopBar.vue'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import Login from '@/components/Login.vue'
import Toast from '@/components/Toast.vue'
import {mapState} from "vuex"

export default {
  name: 'HomeView',
  components: {
    TopBar,Header,Footer,Login,Toast
  },
  data(){
    return{
      num:1
    }
  },
  methods:{
    changeNum(){
      this.num++
    }
  },
  watch:{
    "$route.path":{
      handler(newVal,oldVal){
          // 让TopBar组件重载
          // if(newVal==oldVal){
            if(!localStorage.getItem("x-auth-token")){
              this.num++
            }    
          // }
          
  
        
      }
    }
  },
  computed:{
    ...mapState({
      isShowLoginModal:state=>state.handleLoginModal.isShowLoginModal,
      isShowToast:state=>state.handleToast.isShowToast,
    })
  },
  async created(){
    // axios.get().then()这样的书写， 会有缺陷
    // 1、请求头能不能统一处理
    // 2、不便于接口的统一管理
    // 3、容易出现回调地狱

    // 发起请求，获取数据
    // JingpinAPI() 最终返回？ promise对象
    // async + await
    // await 后面一般放promise对象      
    let res = await JingpinAPI();
    
  



  }
}
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
// 定义进场开始状态
.fade-enter,.fade-leave-to{
  opacity: 0;
}
.fade-enter-active,.fade-leave-active{
  transition: opacity .4s;
}
// 定义进场结束状态
.fade-enter-to,.fade-leave{
  opacity: 1;
}
</style>
